<template>
<view>
	<nav-bar
		title="电影"
		fixed
		cover
		@on-back="$navigateBack()"
	></nav-bar>
	<view class="content">
			<view class="f-tab">
        <view class="f-btn">影院 <iconArrow class="arrow" :point="0" /> </view>
				<view class="item" :class="{on:tabType===1}" @click="changeTab(1)">正在热映</view>
				<view class="c-line-item"></view>
				<view class="item" :class="{on:tabType===2}" @click="changeTab(2)">即将上映</view>
			</view>

			<view class="c-list" v-if="tabType == 1">
				<view class="item" v-for="(item ,index) in l1" :key="index">
					<image class="img" :src="item.thumb" />
					<view class="title">{{item.name}} <text class="tiptxt">免</text> </view>
					<view class="role">小猪猪 </view>
					<view class="role-content">主演：{{item.desc}}</view>
					<view class="scene-content">今天235家影厅放映2465场</view> 
					<view class="b-line" />
					<view class="btn-buy">购票</view>
				</view>
			</view>

			<view class="c-list" v-if="tabType == 2">
				<view class="item" v-for="(item ,index) in l2" :key="index">
					<image class="img" :src="item.thumb" />
					<view class="title">{{item.name}} <text class="tiptxt">免</text> </view>
					<view class="role">小猪猪 </view>
					<view class="role-content">主演：{{item.desc}}</view>
					<view class="scene-content">今天235家影厅放映2465场</view> 
					<view class="b-line" />
					<view class="btn-buy">购票</view>
				</view>
			</view>

		</view>
		<apple-sliver></apple-sliver>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
import NavBar from "../../components/nav-bar";

export default {
	components: {
		iconArrow,
		NavBar,
  },
		data() {
			return {
				captchaImg:'',
				tabType:1,
				areaList:[1,2,3,1,2,3,1,2,3,1,2,3],
				l1: [
					{name: "误杀", thumb: "http://test.freeterna.com:8080/test/images/movie/2.jpg", desc: "肖央、谭卓、陈冲、姜皓文"},
					{name: "宠爱", thumb: "http://test.freeterna.com:8080/test/images/movie/3.jpg", desc: "于和伟、吴磊、张子枫"},
					{name: "灭绝", thumb: "http://test.freeterna.com:8080/test/images/movie/4.jpg", desc: "迈克尔·佩纳、丽兹·卡潘、艾玛·布斯"},
				],
				l2: [
					{name: "唐人街探案3", thumb: "https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@160w_220h_1e_1c", desc: "王宝强、刘昊然、妻夫木聪、托尼·贾"},
					{name: "姜子牙", thumb: "https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@160w_220h_1e_1c", desc: "郑希、杨凝、图特哈蒙"},
					{name: "熊出没·狂野大陆", thumb: "https://p0.meituan.net/moviemachine/ea2f020406b22f6c66a1004087f434e051195.jpg@160w_220h_1e_1c", desc: "张秉君、谭笑、张伟"},
					{name: "夺冠", thumb: "https://p0.meituan.net/moviemachine/6d175dd08812a4ff3f048f7b7e4ed449405105.jpg@464w_644h_1e_1c", desc: "巩俐、黄渤、吴刚、彭昱畅"},
					{name: "只有芸知道", thumb: "https://p0.meituan.net/movie/aa10dea915717372fc0b36bc75a4a5a92888124.jpg@464w_644h_1e_1c", desc: "黄轩、杨采钰、徐帆、Lydia Peckham"},
				],
			}
		},
		onLoad() {
		},
		methods: {
      btnLogin(){
				this.$api.goPage('/pages/index/index');
				// var self = this
				// 	self.$api.ajax({
		    //     	url:'/address/getAllArea',
		    //     	method:'GET',
		    //     	success:function(res){
				// 				console.log(res);
				// 				self.areaList =res.items;
		    //     	}
		    //   })
			},
			changeTab(type){
				this.tabType = type;
			}
		}
	}
</script>

<style  lang="scss" scoped>
.content{
	overflow-y:scroll;
  // min-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

	.f-tab{
	  	display: flex;
			width: px2vw(355);
			position: relative;
      .f-btn{
        font-size: px2vw($fz14);
				height:  px2vw(30);
				width: px2vw(55);
			  line-height:  px2vw(30);
        margin-left: px2vw(10); 
				margin-right: px2vw(35);
				position: relative;
        .arrow{
          margin-left: px2vw(5); 
        }
      }
		.item{
			height:  px2vw(30);
			line-height:  px2vw(30);
			font-size: px2vw($fz18);
			font-weight: 600;
			color: #000;
			padding-left: px2vw(15);
		}
		.on{
			color: #F24244;
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(20);
			margin-top:px2vw(5); 
		}
	}

	.c-list{
			// width: clac(100% - );
			margin: px2vw(10) 41rpx px2vw(30) 19rpx;
			.item{
						height: px2vw(140);
						width: 100%;
						position: relative;
						color: #000;
						 .img{
							 height: px2vw(95);
							 width: px2vw(70);
							 border-radius: px2vw(8);
							 position: absolute;
							 top: px2vw(25);
							 left: 0;
						 }
						 .title{
							 font-size: px2vw($fz18);
							 font-weight:600;
							 position: absolute;
							 top: px2vw(25);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
							 .tiptxt{
								 font-size: px2vw($fz12);
								 background-color: #F24244;
								 color: #F1F1F1;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
						 }
						 .role{
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(55);
							 left: px2vw(85);
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content,
						 .role-content {
						 	 font-size: px2vw($fz12);
							 position: absolute;
							 top: px2vw(84);
							 left: px2vw(85);
							 color: #888;
							 overflow: hidden;
							 text-overflow:ellipsis;
							 white-space: nowrap;
							 width: px2vw(180);
						 }
						 .scene-content{
							  top: px2vw(103);
						 }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(275);
						}
						.btn-buy{
							background-color: #F24244;
							height:  px2vw(30);
							line-height:  px2vw(30);
							width:  px2vw(65);
							border-radius: px2vw(25);
							box-shadow: 0 px2vw(0.5)  px2vw(2)  #D2383A;
							position: absolute;
							right: 0;
							top: 50%;
							margin-top: - px2vw(15);
							text-align: center;
							font-size: px2vw($fz16);
							color: #fff;
						}
				}
	}
</style>
